<template>
  <div>
    <div class="catalogTree" v-show="show">
      <h2 class="title">图层目录</h2>
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        @check-change="checkChange"
      >
        <!-- :render-content="renderContent" -->
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span> <img :src="data.src" />{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <el-tooltip class="item" effect="dark" content="目录树" placement="left">
      <div class="zoombar" @click="treeShow">
        <i :class="show ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: 'cataloTree',
  data() {
    return {
      current: [],
      show: true,
      pic: '../../img/Pnt.png',
      data: [
        {
          id: 11,
          label: '地图文档',
          children: [
            {
              id: 12,
              label: '二级 1-1',
              children: [],
            },
          ],
        },
      ],
      map: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {
    var that = this;
    var docName = 'guanggu';
    const LayerTree = new Zondy.Service.GetMapInfoService({
      ip: 'localhost',
      port: 6163,
      mapName: docName,
    });
    // console.log(LayerTree);
    //获取地图文档信息
    LayerTree.GetMapInfo(function (data) {
      that.data[0].children[0].label = data.name;
    });
    // 获取地图信息
    const docCatalog = new Zondy.Catalog.MapDoc({
      ip: 'localhost',
      port: 6163,
      docName,
    });
    // 获取指定地图下所有图层的要素信息
    docCatalog.getMapDocInfo(function (data) {
      console.log(data.SubMapNames[0]);
    });
    // 获取指定地图下所有图层的要素信息
    docCatalog.getLayersInfo(function (data) {
      // 获取要素名字和要素类型
      //   console.log(data.value);
      data.value.forEach((item) => {
        that.data[0].children[0].children.push({
          id: item.LayerIndex,
          type: item.GeomType,
          src: '../../img/' + item.GeomType + '.png',
          label: item.Name,
        });
        that.current.push(item.LayerIndex);
      });
      that.$nextTick(() => {
        that.$refs.tree.setCheckedKeys(that.current, true);
        console.log(that.current);
      });
    });
  },
  methods: {
    checkChange(data, checked) {
      if (data.id > 10) {
        return;
      }
      checked
        ? this.$store.state.docLayer.setLayerStatus(data.id, 'include')
        : this.$store.state.docLayer.setLayerStatus(data.id, 'exclude');
      // console.log(data);
      // console.log(checked);
    },
    renderContent: function (h, { node, data, store }) {
      console.log(arguments);
      let addElement = arguments[0];
      //   console.log(store.nodesMap);
      console.log(node.checked);
      console.log(node);
    },
    // 目录树
    treeShow() {
      if (this.show) {
        this.show = false;
        document.querySelector('.zoombar').style.left = 0;
      } else {
        document.querySelector('.zoombar').style.left = '223px';
        this.show = true;
      }
    },
    handleSelect(node) {
      console.log(123);
      console.log(node);
    },
  },
};
</script>

<style scoped>
/* 目录树 */
.catalogTree {
  width: 260px;
  height: 350px;
  display: block;
  position: absolute;
  left: 10px;
  top: 200px;
  background-color: #fff;
  box-shadow: 2px 2px 3px -1px #999;
  border: 1px solid #dcdcdc;
  border-radius: 15px;
  z-index: 2;
  margin: 0;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.zoombar[data-v-3a9495f7] {
  background-color: rgb(255, 255, 255);
  width: 30px;
  height: 30px;
  line-height: 10px;
  padding-left: 3px;
  position: absolute;
  border-radius: 50%;
  top: 203px;
  margin-left: 0px;
  cursor: pointer;
  transition: all 0.01s linear 0s;
  z-index: 3;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.catalogTree .title {
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  background-color: #409eff;
  color: #fff;
  border-radius: 15px 15px 0 0;
  margin-bottom: 15px;
}
/* 目录图标 */
/* .custom_icon {
  background-image: url(../../img/Reg.png);
} */
/*  */
.zoombar {
  background-color: rgb(216, 216, 216);
  width: 25px;
  height: 60px;
  line-height: 60px;
  padding-left: 3px;
  position: absolute;
  border-radius: 5px 0 0 5px;
  top: 400px;
  left: 223px;
  cursor: pointer;
  transition: all 0.01s linear 0s;
  z-index: 3;
}
.zoombar i {
  margin-left: 0px;
  margin-top: 3px;
  color: #317fcd;
  font-size: 25px;
}
#icon {
  width: 10px !important;
  height: 10px !important;
  background: url('../../img/Lin.png') !important;
  background-size: 100% 100% !important;
  /* z-index: 100; */
}
/* .iconmap:before {
  content: "切换";
  font-size: 0;
  visibility: hidden;
} */
</style>
